<template>
  <div class="app-container">
    <logs-filter @on-filter="submitFilterForm"/>
    <div style="padding: 20px 0">
      <el-button-group>
        <el-button size="mini" type="primary" icon="el-icon-download" @click="exportHandle">导出
        </el-button>
      </el-button-group>
    </div>
    <el-table
      :data="tableData.list"
      border
      v-loading="loading"
      element-loading-text="加载中..."
      class="el-table-align-center">
      <el-table-column label="转账时间/转账单号" prop="createTime" width="190" align="center">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
          <div>{{row.tradeId}}</div>
        </template>
      </el-table-column>
      <el-table-column label="账户类型" prop="userType" align="center">
        <template slot-scope="{row}">
          {{ row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="账户名" prop="username" align="center">
      </el-table-column>
<!--      <el-table-column label="姓名" prop="reallyName" align="center">-->
<!--      </el-table-column>-->
      <!--<el-table-column label="手机号" prop="telephone" align="center">-->
      <!--</el-table-column>-->
      <el-table-column label="游戏账户名" prop="gameUsername" align="center">
      </el-table-column>
      <el-table-column label="来自" prop="fromChannelId" align="center">
        <template slot-scope="{row}">
          {{ row.fromChannelId  | toConverter('TRANSFER_PLATFORMS')}}
        </template>
      </el-table-column>
      <el-table-column label="转至" prop="toChannelId" align="center">
        <template slot-scope="{row}">
          {{ row.toChannelId  | toConverter('TRANSFER_PLATFORMS')}}
        </template>
      </el-table-column>
      <el-table-column label="转账金额" prop="amount" align="center">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="转账后中心钱包余额" width="180" prop="balance" align="center">
        <template slot-scope="{row}">
          {{row.balance | currency}}
        </template>
      </el-table-column>
      <!--<el-table-column label="转账后平台钱包余额" prop="balance">-->
      <!--</el-table-column>-->
      <el-table-column label="更新时间" width="180" align="center" prop="lastUpdate">
        <template slot-scope="{row}">
          {{row.lastUpdate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template slot-scope="{row}">
          {{row.status | toConverter('TRANSFER_STATUS')}}
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>


<script>
  import {getTransferList,exportTransferLogs} from "@/services/api/transfer";
  import {grid, dialog} from '@/build'
  import LogsFilter from "@/views/finance/transfer/logsFilter";

  export default {
    name: "transfer-logs",
    components: {LogsFilter},
    mixins: [grid, dialog],
    data() {
      return {
        tableData: {},
        filters: {
          time: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
          startTime: moment().format('YYYY-MM-DD 00:00:00'),
          endTime:  moment().format('YYYY-MM-DD 23:59:59'),
          dateType: 1,
          size: 20,
          page: 1,
        },
      }
    },
    methods: {
      exportHandle() {
        let {tradeNo,startTime,endTime,dateType,toChannel,fromChannel,minAmount,maxAmount,status,username,reallyName,telephone,tradeId} = this.filters
        let ajaxData = {startTime,endTime,dateType,toChannel,fromChannel,minAmount,maxAmount,status,username,reallyName,telephone,tradeId}
        let filename = '转账记录明细报表.csv';
        let header = [ '转账时间', '转账单号', '账户类型','账户名','姓名','游戏账户名','来自','转至','转账金额','转账中心钱包余额','更新时间','状态']
        let filterField = ['createTime', 'tradeId', 'userType','username','reallyname','gameUsername','fromChannelId','toChannelId','amount','balance','lastUpdate','status']
        exportTransferLogs(ajaxData).then(([result, data]) => {
      if (result) {
            let exportData = this.responseFormatter(data.list);
            this.export2Excel(header, filterField, exportData, filename)

          } else {
            this.$message({message: '导出失败,' + data.message, type: "warning"})
          }
        })
      },
      responseFormatter(data) {
        data.map(item => {
          item.createTime = _.toTime(item.createTime)
          item.userType =_.toConverter(item.userType,'ACCOUNT_TYPE')
          item.amount = _.currency(item.amount)
          item.balance = _.currency(item.balance)
          // item.amountWithoutFee = _.currency(item.amountWithoutFee)
          item.lastUpdate = _.toTime(item.lastUpdate)
          item.status = _.toConverter(item.status, 'TRANSFER_STATUS')
          item.fromChannelId = _.toConverter(item.fromChannelId, 'TRANSFER_PLATFORMS')
          item.toChannelId = _.toConverter(item.toChannelId, 'TRANSFER_PLATFORMS')
        })

        return data
      }
    },
    mounted() {
      this.bindGet(getTransferList, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });
      this.getAll()
    }
  }
</script>

<style scoped>

</style>
